<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>光大银行BDAP平台问题监控</title>
    <link href="https://cdn.bootcss.com/Chart.js/2.8.0/Chart.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/Chart.js/2.8.0/Chart.js"></script>
    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css">
    <script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
</head>
<body class="bs-docs-home">
<div class=".container-fluid theme-showcase">
    <div class="row">
        <div class="col-sm-14">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title"><strong>光大银行BDAP平台问题监控</strong></h3>
                </div>
            </div>
            <div style="width:900px; margin-top: 60px;margin-left:130px;">
                    <canvas id="myChart" width="600" height="300"></canvas>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var httpUrl = "http://localhost:8080";
    $(function(){
        $.ajax({
            type: "POST",
            url: httpUrl + "/toDistinctTypeNum",
            dataType: "json",
            data: JSON.stringify({start: 0,end: 10}),
            contentType:"application/json;charset=utf-8",
            success: function (data) {
                var labelsarray = [];
                var dataarray = [];
                var countnumdata = data["countnum"].numcount;
                for (i in data) {
                    if(data["countnum"]!=data[i]) {
                        labelsarray.push(data[i].type);
                        dataarray.push((data[i].numcount/countnumdata).toFixed(2));
                    }
                }
                var ctx = document.getElementById('myChart').getContext('2d');
                var myChart = new Chart(ctx, {
                    type: 'bar',   //  线形图：line、条形图：bar 、雷达图：radar、馅饼和甜甜圈图表：pie、极区面积图：polarArea、汽泡：bubble
                    data: {
                        labels: labelsarray,
                        datasets: [{
                            label: '各类问题占比',
                            data: dataarray,
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)',
                                'rgba(135, 123, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)',
                                'rgba(135, 123, 64, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        }
                    }
                });
            }
        })
    })
</script>
</html>